// 纵向项目
<template>
  <div class="module_">
      <el-tabs v-model="activeName"  class="tabs" type="card">
        <el-tab-pane label="项目一览" name="1"></el-tab-pane>
        <!-- <el-tab-pane label="项目申报" name="2"></el-tab-pane> -->
        <el-tab-pane label="项目变更" name="3"></el-tab-pane>
        <el-tab-pane label="项目中检" name="4"></el-tab-pane>
        <el-tab-pane label="项目结项" name="5"></el-tab-pane>
      </el-tabs>
      <transition name="el-fade-in">
        <component v-bind:is="choseComp" ref="comp"></component>
      </transition> 
  </div>
</template>

<script>
import glance from '../components/glance' 
import declare from '../components/declare.vue'
import change from '../components/change.vue'
import inspection from '../components/inspection.vue'
import closing from '../components/closing.vue'


export default {
    name:'project_personalPortrait',
    components:{
       glance,
       declare,
       change,
       inspection,
       closing
    },
    data(){
        return{
            activeName: '1',
            options:{
                '1': glance,
                '2': declare,
                '3': change,
                '4': inspection,
                '5': closing,
            }
        }
    },
    computed:{
        choseComp(){
            return this.options[this.activeName]
        },
        editFormVisible(){
            return this.$refs.comp.editFormVisible
        },
    },
    mounted(){
        const activeName = this.$route.query.activeName
        if(activeName  && this.options[activeName]) {
            this.activeName = activeName
        }
    },
    methods:{
        submit(){
            return this.$refs.comp.submit()
        }
    }
}
</script>

<style>

</style>